<template>
  <List :table="table" :pagination="pagination" v-loading="loading">
<!--    共用  -->
    <template #cardImg="{row}">
      <img :src="row.cardImageUrl" alt="" class="ato-list-card-picture">
    </template>
    <template #orderType="{row}">
      <span>{{ orderTypeMap[row.orderType] }}</span>
    </template>
    <template #checked="{row}">
      <el-checkbox v-model="row.checked" @change="handleChecked"/>
    </template>
    <template #ratingNo_editor="{row, $index}">
      <el-input v-model="row.ratingNo" placeholder="点击录入评级号码" @change="emit('handleWriteRatingNo', row, $index)"/>
    </template>
    <template #wmsStatus_order="{row}">
      <span class="ato-list-operate-primary" @click="emit('wmsHandle', row)">{{ wmsStatusMap[row.wmsStatus] }}</span>
    </template>
<!--  订单  -->
    <template #orderType_in="{row}">
      <span>{{ orderTypeMap[row.orderType] }}</span>
    </template>
    <template #matchResult="{row}">
      <span>{{ matchResultMap[row.matchResult] }}</span>
    </template>
<!--    卡牌  -->
    <template #rating_editor="{row}">
      <el-select v-model="row.rating" placeholder="选择类型">
        <el-option
            v-for="item in ratingOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </template>
    <template #score_editor="{row}">
      <el-select v-model="row.score" placeholder="选择分数">
        <el-option
            v-for="item in scoreOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </template>

    <template #stockStatus="{row}">
      <span>{{ stockStatusMap[row.stockStatus] }}</span>
    </template>
    <template #originScan="{row}">
      <div class="ato-flex">
        <div class="ato-list-scan-pic-upload ato-mr-10">
          <PictureUpload :disabled="props.disabled" v-model="row.frontImage" @change="emit('updateImage', row, 'frontImage')" width="60px" height="60px"/>
          <span>卡牌正面扫描</span>
        </div>
        <div class="ato-list-scan-pic-upload">
          <PictureUpload :disabled="props.disabled" v-model="row.backImage" @change="emit('updateImage', row, 'backImage')" width="60px" height="60px"/>
          <span>卡牌背面扫描</span>
        </div>
      </div>
    </template>
    <template #stickerPhotoUrl="{row}">
<!--      vip订单一直可以上传不禁用-->
      <div class="ato-list-scan-pic-upload">
        <PictureUpload :disabled="props.disabled && !isVip" v-model="row.stickerPhoto" @change="emit('updateImage', row, 'stickerPhoto')" width="60px" height="60px"/>
        <span>贴标正面拍照</span>
      </div>
    </template>
    <template #firstReview="{row}">
      <!--      审核状态：0：待初审，1：待复审，2：复审完成-->
      <div v-if="row.auditStatus === 0">
        <el-radio-group v-model="row.firstReview" @change="emit('firstReview', row)">
          <el-radio label="初审通过" border :value="1"/>
          <el-radio label="初审不通过" border :value="2"/>
        </el-radio-group>
        <div :class="styles['not-pass-select']">
          <p :class="styles['pass-tips']">*不通过原因：</p>
          <el-select v-model="row.firstReason" placeholder="点击选择原因" style="width: 140px">
            <el-option
                v-for="item in firstReasonOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="ato-flex-center-both" v-else>
        <div>
          <p>初审{{ row.firstReview === 1 ? '' : '不' }}通过</p>
          <p v-if="row.firstReason">原因: {{ row.firstReason }}</p>
        </div>
        <el-button type="warning" @click="emit('resetFirstReview', row)">重新审核</el-button>
      </div>
    </template>
    <template #firstReviewResult="{row}">
      <p>{{ firstReviewStatusMap[row.firstReview] }}</p>
      <p v-if="row.firstReason">原因: {{ row.firstReason }}</p>
    </template>
    <template #reviewResult="{row}">
      <span>{{ reviewStatusMap[row.reviewStatus] }}</span>
    </template>
    <template #wmsStatus_card="{row}">
      <span class="ato-list-operate-primary">{{ wmsStatusMap[row.wmsStatus] }}</span>
    </template>
    <template #cardStatus_card="{row}">
      <!--      回寄卡牌(3)和卡牌已回寄(4)才可以操作-->
      <span :class="{'ato-list-operate-primary': [3, 4].includes(row.cardStatus)}" @click="() => emit('handleCardStatus', row)">{{ cardStatusMap[row.cardStatus] }}</span>
    </template>
    <template #cardId_editor="{row, $index}">
      <el-input v-model="row.cardId" placeholder="点击录入卡牌UID" clearable style="width: 200px" @change="emit('handleWriteCardId', row, $index)"/>
    </template>
    <template #delete="{row, $index}">
      <span class="ato-list-operate-primary" @click="emit('handleDelete', row, $index)">删除</span>
    </template>
<!--    出库订单列表  -->
    <template #sendType="{row}">
      <span>{{ sendTypeMap[row.sendType] }}</span>
    </template>
    <template #cardStatus_out="{row}">
      <span>{{ outStatusMap[row.cardStatus] }}</span>
    </template>
    <template #viewerDetail="{row}">
      <span class="ato-list-operate-primary" @click="emit('handleDetail', row.cardId)">查看详情</span>
    </template>
  </List>
</template>

<script setup name="PackageList">
import { List, PictureUpload } from '@/components'
import { matchResultMap, cardStatusMap, wmsStatusMap, firstReviewStatusMap, reviewStatusMap, stockStatusMap, orderTypeMap, sendTypeMap, outStatusMap } from '@/common/statusMap'
import { scoreOptions, ratingOptions, firstReasonOptions } from '@/common/selectOptions'
const props = defineProps({
  table: {
    type: Object,
    default: () => ({
      columns: [],
      rows: []
    })
  },
  pagination: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  },
  isVip: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['wmsHandle', 'firstReview', 'updateImage', 'resetFirstReview', 'handleChecked', 'handleCardStatus', 'handleDetail', 'handleWriteCardId', 'handleWriteRatingNo', 'handleDelete'])

// 操作复选框单选
function handleChecked () {
  const rowsLength = props.table.rows.length
  const checkedList = props.table.rows.filter(row => row.checked)
  const checkedCount = checkedList.length
  emit('handleChecked', {
    allChecked: rowsLength === checkedCount, // 全选状态
    isIndeterminate: checkedCount > 0 && checkedCount < rowsLength, // 半选状态
    checkedRows: checkedList // 已选行数据
  })
}

// 操作全选/全不选
function handleCheckedAll (val) {
  props.table.rows.forEach(row => row.checked = val)
  handleChecked()
}

defineExpose({
  handleCheckedAll
})

</script>

<style lang="less" module="styles" src="./index.less"></style>
